<template>
	<div class="marketGoodsItem" @click="handleGoodsDetails">
		<image class='goodsImageSize' :src="data.imageUrl" alt="" />
		<div class="title"><span class="pinkage">包邮</span>{{data.goodsName}}</div>
		<div class="price">{{data.sellPrice}}</div>
		<div class="saleNum" v-if='data.saleCount'>已售{{data.saleCount}}+</div>
		
		<div class="icon">
			<!-- <view>
			{{data.belongSessions==1?'上午场':data.belongSessions==2?'下午场':data.belongSessions==3?'晚上场':''}}
			</view> -->
			<image class='belongSessionsIcon' v-if='data.belongSessions==1' src="../../static/purchaseGoods/morning1.png" alt="" />
			<image class='belongSessionsIcon' v-if='data.belongSessions==2' src="../../static/purchaseGoods/afternoon1.png" alt="" />
			<image class='belongSessionsIcon' v-if='data.belongSessions==3' src="../../static/purchaseGoods/evenignIcon1.png" alt="" />
		</div>
	</div>
</template>

<script>
	export default {
		name: 'marketGoodsItem',
		props: {
			data: {
				type: Object,
				default: () => {}
			}
		},
		methods: {
			handleGoodsDetails() {
				uni.navigateTo({
					url: `/pages/productDetails/index?id=${this.$props.data.id}&source=market`
				})
			}
		}

	}
</script>

<style scoped lang="less">
	.marketGoodsItem {
		width: 218rpx;
		display: flex;
		flex-direction: column;
		gap: 12rpx;
		position: relative;

	}

	.icon {
		position: absolute;
		top: -5rpx;
		left: -5rpx;
		// font-weight: 400;
		// font-size: 20rpx;
		// color: #FFFFFF;
		// background: rgba(0, 0, 0, 0.6);
		// border-radius: 4px;
		// width: 72rpx;
		// text-align: center;
		// line-height: 40rpx;
		// padding: 0 6rpx;

		.belongSessionsIcon {
			width: 136rpx;
			height: 136rpx;
		}
	}

	.goodsImageSize {
		width: 218rpx;
		height: 218rpx;
		border-radius: 20rpx 20rpx 0 0;
	}

	.title {
		font-weight: 500;
		font-size: 24rpx;
		line-height: 35rpx;
		color: #1F1F1F;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;

		.pinkage {
			display: inline-block;
			padding: 3rpx 8rpx;
			background: #EB3B27;
			border-radius: 6rpx;
			color: #FFFFFF;
			margin-right: 6rpx;
		}
	}

	.saleNum {
		font-weight: 400;
		font-size: 22rpx;
		color: #797979;
	}

	.price {
		font-weight: 500;
		font-size: 32rpx;
		margin-bottom: 10rpx;
		color: var(--tm-themeColor-text1);
	}

	// .price::before {
	// 	content: '¥';
	// 	// width: 22rpx;
	// 	// height: 22rpx;
	// 	// background: url('@/static/happyBin.png') no-repeat;
	// 	// background-size: 100% 100%;
	// 	// display: inline-block;
	// 	// margin-right: 4rpx;
	// 	color: var(--tm-themeColor-text1);
	// }
</style>